import React, { useRef, useState } from "react";
import { Button } from "antd";
import { useNavigate } from "react-router-dom";
import { useRecoilState } from "recoil";
import { homeTextState } from "@/state";
import styles from "./demo.module.less";

const DemoPage = () => {
  const navigate = useNavigate();
  const [text, setText] = useRecoilState(homeTextState);
  const areaRef = useRef(null);

  const handChange = () => {
    let a = text;
    setText(a + "0");
  };
  const handShow = () => {
    // console.log('测试箭头函数');
    // console.log('process.env', process.env.APP_TITLE);
    // console.log('GGRSRER===', process.env.GGRSRER);
    let refs: any = areaRef.current;
    console.log(refs.resizableTextArea.textArea.scrollHeight);
    refs.resizableTextArea.textArea.scrollTop =
      refs.resizableTextArea.textArea.scrollHeight;
  };

  const test1 = () => {
    navigate({
      pathname: "/home/test",
      search: "?search=param",
    });
  };

  return (
    <div>
      <h2>DemoPage</h2>
      <Button color="primary" onClick={test1}>
        go test page
      </Button>
      <Button onClick={() => {}}>跳转富文本</Button>
      <Button onClick={handChange}>change</Button>
      <h1 className={styles["textade"]}>{text}红色</h1>
      <Button onClick={handShow}>show</Button>
      <h5>H5</h5>
    </div>
  );
};
export default DemoPage;
